<template>
	<view class="course">
		<u-navbar :background="background" back-icon-color="#FFFFFF">
		</u-navbar>
		<!-- 新人任务 -->
		<view class="w702" style="margin-top:340rpx;">
			<view class="newtask">
				新人奖励
			</view>
			<block v-for="(item,idx) in newtaskList" :key="idx">
				<view class="task-view">
					<view class="task-Name">
						{{item.pointTitle}}
						<view class="task-remark">
							{{item.remark}}
						</view>
					</view>
					<view class="bean-number">
						<text class="bean-bgimage">+{{item.pointValue}}</text>
					</view>
				</view>
				<view class="line63" v-show="newtaskList.length-1 != idx">
				</view>
			</block>
		</view>
		<!-- 每日任务 -->
		<view class="w702">
			<view class="newtask">
				每日奖励
			</view>
			<block v-for="(item,idx) in everydaylist" :key="idx">
				<view class="task-view" :class="isShow&&idx >1?'disNone':''">
					<view class="task-Name">
						{{item.pointTitle}}
						<view class="task-remark">
							{{item.remark}}
						</view>
					</view>
					<view class="bean-number">
						<text class="bean-bgimage">+{{item.pointValue}}</text>
					</view>
				</view>
				<view class="line63">
				</view>
			</block>
		</view>
		<view class="w702A">
			<!-- 使用途径 -->
			<view class="linebg-btn">使用途径</view>
			<view class="linebg-text">
				健康豆在商城购买商品时抵扣现金人民币，抵扣比例为100：1
			</view>
			<!-- 有效期 -->
			<view class="linebg-btn">有效期</view>
			<view class="linebg-text">
				健康豆有效期为一年，每年4月1日清零
			</view>
			<view style="height: 100rpx;"></view>
		</view>
	</view>
</template>

<script>

import uNavbar from "@/uview-ui/components/u-navbar/u-navbar.vue"

	export default {
		components: {
			uNavbar,
		},
		data() {
			return {
				background: {
					backgroundImage: 'linear-gradient(10deg, rgb(129, 192, 66,0), rgb(46, 167, 224,0))'
				},
				newtaskList: [], //新人
				everydaylist: [] //每日
			}
		},
		onLoad() {
			this.point()
		},
		methods: {
			// 获取健康豆接口
			point() {
				let _this = this;
				this.$shopnew.get(global.apiUrls.point, {}).then(res => {
					if (res.data.code == 1000) {
						let everydaylist = [],
							newtaskList = [],
							result = res.data.result; //接口返回所有数据
						for (let i = 0; i < result.length; i++) {
							if (result[i].pointType == 1) { //新手
								newtaskList.push(result[i])
							} else { //每日
								everydaylist.push(result[i])
							}
						}
						_this.newtaskList = newtaskList;
						_this.everydaylist = everydaylist;
					} else {

					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.course {
		width: 750upx;
		// min-height: 2155upx;
		min-height: 1605upx;
		background: url(http://static.bsyjk.cn/zhuandou/D69C019B2E3A45C5BAEC3A492B3CE91F.jpeg)no-repeat;
		background-size: 750upx 2155upx;
	}

	.w702 {
		width: 702upx;
		margin: 30upx auto 0;
		border-radius: 20upx;
	}

	.newtask {
		width: 702upx;
		height: 90upx;
		background: linear-gradient(225deg, #FF8960 0%, #FF62A5 100%);
		opacity: 0.68;
		font-size: 30upx;
		font-weight: 500;
		color: #F5F5F5;
		line-height: 90upx;
		padding: 0 20upx;
		border-radius: 20upx 20upx 0 0;
	}

	.task-view {
		padding: 40rpx 20upx;
		display: flex;

		.task-Name {
			width: 600upx;
			font-size: 30upx;
			font-weight: 400;
			color: #333333;

			.task-remark {
				font-size: 24rpx;
				color: #9C9C9C;
			}
		}

		.bean-number {
			width: 200upx;
			font-size: 34upx;
			font-weight: 500;
			color: #333333;

			.bean-bgimage {
				position: relative;

			}

			.bean-bgimage:before {
				content: '';
				width: 45upx;
				height: 36upx;
				position: absolute;
				right: -46upx;
				top: 2upx;
				// background: #000;
				background: url(https://bsyjk-pic.bsyjk.cn/beanredicon/1E5FA58BCEB64D0BB47788045DD3FAFE.png)no-repeat;
				background-size: 45upx 36upx;
			}
		}

		.dotasks {
			.dotasks-btn {
				width: 136upx;
				height: 46upx;
				margin: 38upx 0 0;
				background: linear-gradient(225deg, #FF8960 0%, #FF62A5 100%);
				border-radius: 42upx;
				font-size: 24upx;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 46upx;
				padding: 0;

			}
		}
	}

	.line63 {
		width: 663upx;
		height: 2upx;
		background: #F5F5F5;
		margin: 0 auto;
	}

	.linebg-btn {
		width: 136rpx;
		height: 46rpx;
		font-size: 24rpx;
		text-align: center;
		line-height: 46rpx;
		color: #fff;
		background: linear-gradient(225deg, #FF8960 0%, #FF62A5 100%);
		margin: 30rpx 0;
		border-radius: 25rpx;
	}
	.linebg-text{
		font-size: 24rpx;
		color: #fff;
	}
	.w702A{
		width: 680rpx;
		margin: 0 auto;
	}
</style>
